<template>
	<div class="advert_swiper swiper">
		<ul class="swiper-wrapper">
			<li class="swiper-slide">
				<img src="../../../assets/img/dd2.jpg" />
			</li>
			<li class="swiper-slide">
				<img src="../../../assets/img/dd1.jpg" />
			</li>
			<li class="swiper-slide">
				<img src="../../../assets/img/dd3.jpg" />
			</li>
		</ul>
		<div class="swiper-pagination advert_pagination"></div>
	</div>
</template>

<script>
	import {onMounted} from 'vue';
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'Advert',
		setup(){
			onMounted( ()=>{ 
				new Swiper('.advert_swiper' ,{
					loop :true,
					pagination : {
						el :'.advert-pagination'
					},
					autoplay : {
						delay : 2000,
						stopOnLastSlide : false,
						disableOnInteraction : false,
					}
				})
			})
		}
	}
</script>

<style scoped>
	.advert_swiper{
		width: 100%;
		height: 5.6rem;
	}
	.advert_swiper img{
		width: 100%;
		height: 100%;
	}
	.advert_pagination .deep(.advert-pagination-bullet-active){
		background-color: #ffdd40;
	}
</style>
